import { defineComponent } from "vue";
import { useRoute } from "vue-router";
import { useFullscreen } from "@vueuse/core";
import { GetQueryString } from "@/utils/util";
export default defineComponent({
	setup() {
		const route = useRoute();
		const pageEl = ref();
		const { isFullscreen, toggle } = useFullscreen(pageEl);
		onMounted(() => {
			const param = GetQueryString(route.meta.url as string);
			if (param.isFullscreen) {
				nextTick(() => {
					toggle();
				});
			}
		});
		return () => {
			return (
				<div class="w-full h-full relative" ref={pageEl}>
					<div class="absolute top-2 right-4 " style="opacity:0.8;height: 40px;">
						<el-tooltip effect="light" content={isFullscreen.value ? "退出全屏" : "全屏显示"}>
							<el-link
								onClick={() => {
									toggle();
								}}
								underline={false}
								class={[
									"cursor-pointer iconfont text-3xl text-slate-400",
									isFullscreen.value ? "iconbx-exit-fullscreen" : "iconbx-fullscreen"
								]}
							></el-link>
						</el-tooltip>
					</div>
					<iframe class="w-full h-full border-0" src={route.meta.url as string} />
				</div>
			);
		};
	}
});
